<template>
	<view class="ApplyJoin">
		<u-form :model="params" ref="uForm">
			<view class="join-title font-weight-600 size-28 color3"><text class="color">*</text>个人信息</view>
			<view class="personal f-background radius24">
				<SingleUpload :width="228" :height="252" img="scxxzs.png"
					@afterRead="$event => params.imagePhoto = $event" :fileListData="params.imagePhoto"
					@delete="params.imagePhoto = ''" />
				<view>
					<u-form-item label="姓名" prop="name" ref="name" labelWidth="82rpx">
						<u--input v-model="params.name" class="size-28 color3" placeholder-class="color9" type="text"
							border="none" clearable placeholder="请输入真实姓名"></u--input>
					</u-form-item>
					<u-form-item label="性别" prop="sex" ref="sex" labelWidth="82rpx">
						<view class="gender dis-ali size-28">
							<view class="dis-ali color9" :class="{'man-style color3':params.sex == 1}"
								@click="params.sex = 1">
								<text class="iconfont icon-nan color-f size-26"></text> 男士
							</view>
							<view class="dis-ali margin-left-24 color9" :class="{'ms-style color3':params.sex == 0}"
								@click="params.sex = 0">
								<text class="iconfont icon-nv color-f size-26"></text> 女士
							</view>
						</view>
					</u-form-item>
					<u-form-item label="手机" prop="phoneNumber" ref="phoneNumber" labelWidth="82rpx">
						<u--input v-model="params.phoneNumber" clearable class="size-28 color3"
							placeholder-class="color9" type="text" border="none" placeholder="请输入手机号码"
							maxlength="11"></u--input>
					</u-form-item>
				</view>
			</view>
			<view class="join-title font-weight-600 size-28 color3"><text class="color">*</text>服务小区</view>
			<!-- 跑腿员 -->
			<navigator hover-class="none" url="/packagePerson/address/residential?type=2" v-if="params.applyType == 4">
				<view class="runner width100 f-background radius24" v-if="!params.infos.length">
					<view class="runner-icon dis">
						<text class="iconfont icon-xiaoqu"></text>
					</view>
					<view>
						<view class="service dis-cen">
							<view class="size-34 color0 font-weight-600">选择服务小区</view>
							<text class="iconfont icon-right-1-copy color3"></text>
						</view>
						<view class="size-30 color9">请选择需要服务的小区</view>
					</view>
				</view>
				<view class="runner width100 f-background radius24" :class="{'margin-top-20':index != 0}"
					v-for="(item,index) in params.infos" :key="index">
					<u--image radius="16rpx" width="120rpx" height="120rpx" :src="item.communityImage || 1">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
					<view>
						<view class="service dis-cen">
							<view class="size-34 color0 font-weight-600">{{item.communityName}}</view>
							<text class="iconfont icon-right-1-copy color3"></text>
						</view>
						<view class="size-30 color9">{{item.communityAddress}}</view>
					</view>
				</view>
			</navigator>
			<!-- 团长 -->
			<view class="commander width100 f-background radius24" v-else>
				<view class="commander-per">
					<SingleUpload :width="180" :height="180" img="scdmz.png"
						@afterRead="$event => community.communityImage = $event" @delete="community.communityImage = ''"
						:fileListData="community.communityImage" />
					<view>
						<u-form-item label="名称" prop="communityName" ref="communityName" labelWidth="82rpx">
							<u--input v-model="community.communityName" class="size-28 color3"
								placeholder-class="color9" type="text" border="none" clearable
								placeholder="请输入小区名称"></u--input>
						</u-form-item>
						<view @click="onOpenMap">
							<u-form-item label="地址" prop="communityAddress" ref="communityAddress" labelWidth="82rpx">
								<u--input v-model="community.communityAddress" clearable class="size-28 color3"
									placeholder-class="color9" type="text" border="none" placeholder="请选择小区地址"
									readonly></u--input>
								<text slot="right" class="iconfont icon-right-1-copy color9"></text>
							</u-form-item>
						</view>
					</view>
				</view>
				<u-form-item prop="PerHead" ref="PerHead">
					<u--textarea maxlength="50" v-model="community.communityHouseNumber" placeholder="请输入小区详细地址" count
						placeholder-class="color9"></u--textarea>
				</u-form-item>
			</view>
			<view class="join-title font-weight-600 size-28 color3"><text class="color">*</text>实名认证</view>
			<view class="informa f-background radius24">
				<u-form-item label="身份证号" prop="carId" ref="carId" labelWidth="158rpx">
					<u--input v-model="params.carId" clearable class="size-28 color3" placeholder-class="color9"
						type="text" border="none" placeholder="请输入身份证号"></u--input>
				</u-form-item>
				<view class="information text-align">
					<SingleUpload @afterRead="$event => params.carFore = $event" @delete="params.carFore = ''"
						:fileListData="params.carFore" />
					<view class="information-margin color6 size-30">点击上传身份证正面</view>
					<SingleUpload @afterRead="$event => params.carBack = $event" @delete="params.carBack = ''"
						:fileListData="params.carBack" img="fan.png" />
					<view class="information-margin color6 size-30">点击上传身份证背面</view>
				</view>
			</view>
		</u-form>
		<view class="inset-bottom"></view>
		<view class="add-goods app-bottom-left f5-background inset-bottom dis">
			<u-button type="primary" @click="onSubmit" :disabled="disabled"
				:customStyle="{width: '690rpx',height: '96rpx',margin:'0 aotu', borderRadius: '100rpx'}"
				color="#EB0000">
				<text class="color-f font-weight-500 size-34 margin-left-12">确认提交</text>
			</u-button>
		</view>
	</view>
</template>

<script>
	import SingleUpload from "@/components/single-upload/single-upload"
	import { addressKey } from '@/utils/public';
	import { ApplyTableAdd, GetInfoById } from "@/api/index"
	var QQMapWX = require('@/utils/address-analyze/qqmap-wx-jssdk');
	var qqmapsdk = new QQMapWX({
		key: addressKey
	});
	export default {
		components: { SingleUpload },
		data() {
			return {
				disabled: false,
				rules: {
					imagePhoto: { empty: '请上传形象照' },
					name: {
						regular: /^(?:[\u4e00-\u9fa5]·?){2,15}$/,
						empty: '请输入真实姓名',
						error: '姓名输入有误，需输入真实姓名',
					},
					phoneNumber: {
						regular: /^(13|14|15|16|17|18|19)\d{9}$/,
						empty: '请输入手机号码',
						error: '手机号码输入有误',
					},
					carId: { empty: '请上传身份证号' },
					carFore: { empty: '请上传身份证正面' },
					carBack: { empty: '请上传身份证反面' },
				},
				rulesCommunity: {
					communityImage: { empty: '请上传小区大门照' },
					communityName: { empty: '请输入小区名称', },
					communityAddress: { empty: '请选择小区地址' },
					communityHouseNumber: { empty: '请输入小区详细地址' },
				},
				community: {
					communityImage: '', // 	小区图片
					communityName: '', // 小区名称
					communityAddress: '', // 小区地址
					communityHouseNumber: '', // 小区门牌号
					communityLongitude: 0,
					communityLatitude: 0,
				},
				params: {
					imagePhoto: '', // 形象照
					name: '', // 	姓名
					sex: 1, // 性别 0.女 1.男
					phoneNumber: '', // 电话号码
					carId: '', // 身份证号码
					carFore: '', // 身份证正面
					carBack: '', // 身份证反面
					applyType: '', // 申请类型 3-访问有空 4-网格员 5-团长 6-用户
					infos: [], // 小区信息列表
				},
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			// this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			this.params.applyType = options.type
			if (options.id) this.getGetInfoById(options.id)
		},
		methods: {
			async postApplyTableAdd() {
				this.disabled = true
				const { code, data } = await ApplyTableAdd(this.params)
				if (code == '200') {
					uni.redirectTo({
						url: `/packagePerson/audit-status/audit-status?type=${data.id}`
					})
					console.log('this.disabled', this.disabled)
				} else this.disabled = false
			},
			// 查看详情
			async getGetInfoById(id) {
				const { code, data } = await GetInfoById({ id: id })
				if (code == '200') {
					// this.byInfo = data
					// if (bool) uni.$u.toast('刷新成功', 2000)
					// 处理数据
					for (let i in this.params) {
						console.log(data[i], i)
						this.params[i] = data[i]
					}
					for (let i in this.community) {
						console.log(data[i], i)
						this.community[i] = data.infos[0][i]
					}
				}
			},
			// 循环验证
			verification(rules, params) {
				for (let i in rules) {
					// console.log(params[i], i)
					if (!params[i]) {
						uni.$u.toast(rules[i].empty, 2000)
						return
					} else {
						if (rules[i].regular && !rules[i].regular.test(params[i])) {
							uni.$u.toast(rules[i].error, 2000)
							return
						}
					}
				}
				return true
			},
			// 提交验证数据
			onSubmit() {
				const { params, community, rules, rulesCommunity } = this
				if (!this.verification(rules, params)) return
				if (params.applyType * 1 == 5 && !this.verification(rulesCommunity, community)) return
				if (params.applyType * 1 == 5) {
					params.infos = [this.community]
				} else if (params.applyType * 1 == 4 && !params.infos.length) {
					uni.$u.toast('请选择服务小区', 2000)
					return
				}
				this.postApplyTableAdd()
			},
			// 打开地图
			onOpenMap() {
				const _this = this
				uni.chooseLocation({
					success: function(resData) {
						// console.log(resData.name)
						_this.community.communityName = resData.name
						if (!resData.address) {
							uni.$u.toast('请先选择地址', 2000)
							return
						}
						_this.community.communityLatitude = resData.latitude
						_this.community.communityLongitude = resData.longitude
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: resData.latitude * 1,
								longitude: resData.longitude * 1
							},
							success: function(res) { //成功后的回调
								console.log(res)
								const { province, city, district } = res.result.address_component
								const { landmark_l2, town } = res.result.address_reference
								_this.community.communityAddress = `${province}${city}${district}`
								_this.community.communityHouseNumber = resData.address.slice(_this
									.community.communityAddress.length)

							}
						})
					}
				});
			},
			// 选择营业时间
			onChooseHours(event, name) {
				console.log(event, name)
				this.params[name] = event.detail.value
			}
		},

	}
</script>

<style lang="scss">
	::v-deep.ApplyJoin {
		padding: 0 24rpx 200rpx;

		.join-title {
			padding: 36rpx 0 28rpx;
		}

		// 申请个人信息
		.personal {
			padding: 24rpx;
			display: grid;
			grid-gap: 24rpx;
			grid-template-columns: 228rpx 1fr;

			.u-input__content__field-wrapper__field {
				height: 82rpx !important;
			}

			.gender {
				height: 84rpx;

				.iconfont {
					display: block;
					width: 34rpx;
					height: 34rpx;
					background: rgba(153, 153, 153, 0.6);
					border-radius: 100rpx;
					margin-right: 12rpx;
					line-height: 34rpx;
					text-align: center;
				}

				.man-style .iconfont {
					background: #3291F2;
				}

				.ms-style .iconfont {
					background: #E95A74;
				}
			}
		}

		// 跑腿员服务小区
		.runner {
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			display: grid;
			grid-gap: 24rpx;
			grid-template-columns: 120rpx 1fr;
			align-items: center;

			.runner-icon {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				background: rgba(235, 0, 0, 0.05);

				.icon-xiaoqu {
					color: #F75E5E;
					font-size: 66rpx;
				}
			}

			.service {
				margin-bottom: 38rpx;
			}
		}

		// 申请服务小区
		.commander {
			padding: 24rpx;
			box-sizing: border-box;

			.u-textarea {
				border-radius: 10rpx;
				margin-top: 20rpx;
				border: 0;
				padding: 24rpx;
				background: #F6F6F6;

				.u-textarea__field {
					height: 140rpx !important;
					font-size: 28rpx;
				}

				.u-textarea__count {
					right: 24rpx;
					bottom: 24rpx;
					background: rgba(0, 0, 0, 0) !important;
					font-size: 28rpx;
					color: #999999;
					line-height: 30rpx;
				}
			}

			.u-form-item__body {
				border-bottom: 0;
			}

			.commander-per {
				display: grid;
				grid-template-columns: 180rpx 1fr;
				grid-gap: 24rpx;

				.u-form-item__body {
					border-bottom: 1px solid #F1F1F1;
				}
			}

			.u-input__content__field-wrapper__field {
				height: 88rpx !important;
			}
		}

		// 身份证部分
		.informa {
			padding: 0 40rpx;

			.u-input__content__field-wrapper__field {
				height: 100rpx !important;
			}

			.information {
				margin-top: 60rpx;

				.information-margin {
					padding: 28rpx 0 60rpx;
				}
			}
		}


		// 输入部分
		.u-form-item__body {
			border-bottom: 1px solid #F1F1F1;
		}

		.u-form-item__body__left__content__label,
		.u-input__content__field-wrapper__field {
			font-size: 28rpx !important;
		}

		.add-goods {
			height: 168rpx;
			width: 100%;
			position: fixed;
			z-index: 100;
		}
	}
</style>